<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
	 <meta charset="utf-8">
	 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	 <title th:replace="common/base::pagetitle"></title>
	 <link th:replace="common/base::static"/>
	 <link rel='stylesheet' th:href="@{/static/css/element.ui.2.13.2.index.css}">
</head>
<body style="background-color: #f2f2f2;">

<div id="kPage" class="layui-fluid" style="padding: 0">
	 
	 <div class="layui-row wlb-fluid-padding15">
		  
		  <div  class="layui-col-md12" >
				
				<div class="layui-card">
<!--					 <div class="layui-card-header">流程图</div>-->
<!--					 1 ——> 2 ——> 3 ——> 4-->
					 <div class="layui-card-body">
						  <div class="layui-form" lay-filter="">
								<fieldset style="border: 0px" disabled>
								<div class="layui-form-item">
									 <label class="layui-form-label">生成时间</label>
									 <div class="layui-input-inline" style="width: 35%">
										  <input type="text" id="generateTime" name="generateTime" lay-verify="required"  placeholder="请输入用户名" autocomplete="off" class="layui-input">
									 </div>
									 <label class="layui-form-label" style="width: 10%">供应商</label>
									 <div class="layui-input-inline" style="width: 35%">
										  <input type="text" id="supplierName" name="supplierName" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
									 </div>
						 	 	</div>
								<div class="layui-form-item">
									 <label class="layui-form-label">申请银行</label>
									 <div class="layui-input-inline" style="width: 35%">
										  <input type="text" id="bankName" name="bankName" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
									 </div>
									 <label class="layui-form-label" style="width: 10%">到期日期</label>
									 <div class="layui-input-inline" style="width: 35%">
										  <input type="text" id="endTime" name="endTime" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
									 </div>
								</div>
								<div class="layui-form-item">
									 <hr />
								</div>
								<!-- 渲染json schema模板 -->
								<div id="voucherList">
									 <vue-form
												v-model="formData"
												:ui-schema="uiSchema"
												:schema="schema"
												:custom-rule="customRule"
									 >
										  <div slot-scope="{ formData, formRefFn }">
<!--												            <el-button @click="check(formData,schema)" type="primary">生成</el-button>-->
										  </div>
									 </vue-form>
								</div>
								</fieldset>
								<div class="layui-form-item layui-hide">
									 <input type="button" lay-submit="" lay-filter="kFormSubmit" id="kFormSubmit" value="生成凭证">
<!--									 <input type="button" lay-submit="" lay-filter="kFormCheck" id="kFormCheck" value="验证凭证">-->
									 <input type="text" id="templateId" name="templateId" th:value="${templateId}" placeholder="保存ID" autocomplete="off" class="layui-input">
									 <input type="text" id="tradeId" name="tradeId"  th:value="${tradeId}" placeholder="保存ID" autocomplete="off" class="layui-input">
									 <input type="text" id="bankId" name="bankId" th:value="${bankId}" placeholder="保存ID" autocomplete="off" class="layui-input">
									 <input type="text" id="ids" name="ids" th:value="${ids}" placeholder="保存ID" autocomplete="off" class="layui-input">
								</div>
						  </div>
					 </div>
				</div>
				
		  </div>
	 </div>
</div>

<script th:replace="common/base::context"></script>
<script th:replace="common/base::mainjs"></script>
<script th:src="@{/static/js/schema/polyfill.umd.min.0.0.1.js}"></script>
<script th:src="@{/static/js/schema/vue.2.6.12.js}"></script>
<script th:src="@{/static/js/schema/element.ui.index.2.13.2.js}"></script>
<script th:src="@{/static/js/schema/vueJsonSchemaForm.umd.1.2.0.min.js}"></script>
<script th:src="@{/static/js/schema/axios.0.18.0.min.js}"></script>

<script type="text/javascript" th:inline="javascript">
	 
    layui.use(['form'], function () {
        var $ = layui.$, form = layui.form;
        //监听提交
        form.on('submit(kFormSubmit)', function (data) {
            var field = data.field; //获取提交的字段
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引

            log('field=', field);

            //提交 Ajax 成功后，关闭当前弹层并重载表格
            $.ajax({
                type: req.type.post,
                url: BASE_WEB + 'voucher/generate/create',
                data: field,
                async: false,
                success: function (r) {
                    if (r.code === req.status.ok) {
								parent.wlbKit.sucessMsg("凭证生成成功");
                        // layer.msg("凭证生成成功！", 1)
                        // parent.layui.table.reload('kContentTable'); //重载表格
                        // parent.layer.close(index); //再执行关闭
                    } else {
                        console.log(r.msg);
                        wlbKit.errorMsg(r.msg);
                    }
                }
            });

        });
    })
    //初始化
    initSchema();

    /**
	  * 初始化模板数据
     * @param contractNo
     * @param dataType
     * @returns {{schema: {}, formProps: {}, btype: string, uiSchema: {}, businessId: string, formData: {}, formFooter: {}}}
     */
    function initSchema(){
        // vue实例
        var vm = new Vue({
            // 实例名
            el: '#voucherList',
            // 定义数据字段
            data(){
                return {
                    // json 模板
                    schema: {

                    },
                    // 表单布局
                    formFooter: {
                        show: true, // 是否显示默认底部
                        okBtn: '保存', // 确认按钮文字
                        cancelBtn: '取消', // 取消按钮文字

                        // 透传给formFooter 中的formItem组件的参数
                        // 例如 vue3-ant 配置wrapperCol  formItemAttrs = { wrapperCol: { span: 10, offset: 5 }}
                        formItemAttrs: {}
                    },
                    // 表单属性
                    formProps: {

                    },
                    // 表单ui
                    uiSchema: {

                    },

                    // 表单数据
                    formData: {

                    },
                    customRule: ({
                                     field,
                                     value,
                                     rootFormData,
                                     callback
                                 }) => {
                        const rules = [{
                            rule: 'password2',
                            validator(value, rootFormData) {
                                if (value !== rootFormData.password) return '密码输入不一致';
                            }
                        }, {
                            rule: /imgList\.\d+\.imgUrl/,
                            validator(value, rootFormData) {
                                if(!/^https/.test(value)) return '请输入https链接';
                            }
                        }];

                        for(const ruleItem of rules) {
                            // String | Regx
                            if ((String(ruleItem.rule) === ruleItem.rule && ruleItem.rule === field)
                                || (Object.prototype.toString.call(ruleItem.rule) === '[object RegExp]' && ruleItem.rule.test(field))
                            ) {
                                const error = ruleItem.validator(value, rootFormData);
                                // 停止继续校验
                                if (error) return callback(error);
                            }
                        }
                        return callback();
                    }
                }
            },
            // 初始化钩子
            mounted() {
                this.queryData();
            },
            methods: {
                // 拿到模板数据
                queryData(){
                    var vue = this;
                    // let btype = document.getElementById("btype");
                    // vue.btype = btype.value;
                    var p = axios.get(BASE_WEB + "voucher/generate/preview/info",{params:{tradeId:$("#tradeId").val(), templateId:$("#templateId").val(), bankId:$("#bankId").val(), ids:$("#ids").val()}})
                    p.then(function (result) {
                        if (result.data.code === 200) {
                            var schema = result.data.data.templateData;
                            $("#generateTime").val(result.data.data.generateTime);
                            $("#supplierName").val(result.data.data.supplierName);
                            $("#bankName").val(result.data.data.bankName);
                            $("#endTime").val(result.data.data.endTime);
                            if(schema.schema){
                                vue.schema = schema.schema;
                            }
                            // if(schema.formFooter){
                            //     vue.formFooter = schema.formFooter;
                            // }
                            if(schema.formProps){
                                vue.formProps = schema.formProps;
                            }
                            if(schema.uiSchema){
                                vue.uiSchema = result.data.data.uiSchema;
                            }
                            //加载数据
                            vue.formData = result.data.data.voucherData;
                        } else {
                            vue.schema = {};
                        }
                    }).catch(function (error) {
                        console.log(error)
                    })
                },
                consoleLog(consoleLog){
                    console.log(consoleLog)
                },
                check(formData, schema){
                    console.log(schema)
                }
            }
        });
	 }

  
  
</script>

</body>
</html>